<template>
    <div class="order-detail">
      <!-- 基础信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>基础信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>运单状态：</span><span class="status-green">
            {{ waybillStatusText }}</span></div></el-col>
          <el-col :span="6"><div class="info-item"><span>运单号：</span> {{this.basicDetail.id}} </div></el-col>
          <el-col :span="6"><div class="info-item"><span>始发地：</span>{{this.basicDetail.name1}}/{{ this.basicDetail.name2 }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>目的地：</span>{{this.basicDetail.name3}}/{{ this.basicDetail.name4 }}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>运输方式：</span>{{this.basicDetail.transportName}}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>下单时间：</span>{{this.basicDetail.orderCreatedTime}}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>创建时间：</span>{{this.basicDetail.createdTime}}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>创建人：</span>{{this.basicDetail.realName}}</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"><div class="info-item"><span>最后更新时间：</span>{{this.basicDetail.finalTime}}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>最后更新人：</span>{{this.basicDetail.finalName}}</div></el-col>
        </el-row>
      </el-card>
  
      <!-- 承运商 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>承运商</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>承运商名称：</span>{{ this.sendDetail.companyName }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>联系人姓名：</span>{{ this.sendDetail.legalPerson }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>手机号码：</span>{{ this.sendDetail.lpPhone}}</div></el-col>
          
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>司机姓名：</span>{{ this.sendDetail.name }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>手机号码：</span>{{ this.sendDetail.contact }}</div></el-col>
  
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>车型：</span>{{ this.sendDetail.vehicleType }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>车长：</span>{{ this.sendDetail.vehicleLength }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>车牌号：</span>{{ this.sendDetail.licensePlate }}</div></el-col>
        </el-row>
      </el-card>
      <!-- 货物信息 -->
      <el-card class="box-card">
         <div slot="header" class="clearfix">
          <span>货物信息</span>
        </div>
        <el-table :data="goodsData" style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="200px"></el-table-column>
          <el-table-column  label="始发地" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.dpaProvince }}</span>/ 
              <span> {{ scope.row.dpaCity }}</span> 
            </template>
          </el-table-column>
          <el-table-column  width="150px" label="目的地">
            <template slot-scope="scope">
              <span>{{ scope.row.cdaProvince }}</span>/ 
              <span> {{ scope.row.cdaCity }}</span> 
            </template>
          </el-table-column>
          <el-table-column prop="goodsName" label="货物名称"></el-table-column>
          <el-table-column  label="数量">
            <template slot-scope="scope">
              <span>{{ scope.row.goodsCount }}</span> 箱
            </template>
          </el-table-column>
          <el-table-column prop="goodsVolume" label="体积(m³)"></el-table-column>
          <el-table-column prop="goodsWeight" label="重量(kg)"></el-table-column>
          <el-table-column prop="transportationFee" label="分销运费(元)" width="120px">
            <template slot-scope="scope">
              <span>{{ (scope.row.transportationFee/3).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="packagingFee" label="装卸费(元)">
            <template slot-scope="scope">
              <span>{{ (scope.row.packagingFee / 3).toFixed(2) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="loadingFee" label="包装费(元)">
            <template slot-scope="scope">
              <span>{{ (scope.row.loadingFee / 3).toFixed(2) }}</span>
            </template>
          </el-table-column>
        </el-table>
         <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="6"><div class="info-item"><span>总数量：</span>{{ this.goodsData[0].allCount }} </div></el-col>
          <el-col :span="6"><div class="info-item"><span>总体积：</span>{{this.goodsData[0].allVolume  }}m³ </div></el-col>
          <el-col :span="6"><div class="info-item"><span>总重量：</span>{{ this.goodsData[0].allWeight }} kg</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>计费方式：</span>
            {{ this.goodsData[0].billingMethod ==0?'按重量':'按体积'}}
          </div></el-col>
          <el-col :span="6"><div class="info-item"><span>运费成本：</span>{{ this.goodsData[0].transportationFee }}元</div></el-col>
          <el-col :span="6"><div class="info-item"><span>包装费：</span>{{ this.goodsData[0].packagingFee }}元</div></el-col>
          <el-col :span="6"><div class="info-item"><span>装卸费：</span>{{this.goodsData[0].loadingFee  }}元</div></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>其他费用：</span>{{ this.goodsData[0].otherFees }}元</div></el-col>
          <el-col :span="6"><div class="info-item"><span>运费合计：</span>{{ this.goodsData[0].totalFee }}元</div></el-col>
        </el-row> 
      </el-card>
  
      <!-- 其他信息 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>其他信息</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="6"><div class="info-item"><span>计划发车时间：</span>{{ this.goodsData[0].planDepartureTime }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>实际发车时间：</span>{{ this.goodsData[0].actualDepartureTime }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>计划到达时间：</span>{{ this.goodsData[0].planArrivalTime }}</div></el-col>
          <el-col :span="6"><div class="info-item"><span>实际到达时间：</span>{{ this.goodsData[0].actualArrivalTime }}</div></el-col>
        </el-row>
      </el-card>
  
      <!-- 底部悬浮按钮 -->
      <div class="fixed-bottom">
        <el-button size="small" @click="returnWaybill">返回</el-button>
        <el-button size="small" type="primary">导出</el-button>
        <el-button size="small" type="primary">打印</el-button>
        <el-button size="small" type="primary">取消调度</el-button>
        <el-button size="small" type="primary">编辑</el-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    // name: 'WaybillDetail',
    data() {
      return {
        waybillId:'',
        waybillDetails: null,
        basicDetail: {},//基本信息对象
        sendDetail:{ }, //承运商信息
        goodsData: [{planDepartureTime:'',actualDepartureTime:'' ,planArrivalTime:'',actualArrivalTime:''} ] ,//货物信息
      }
    },
    methods: {
      queryBasicDetail() {//查询基础信息
          this.$axios.get("/api/waybill/queryBasicDetail/" + this.waybillId)
              .then(resp => {
                  console.log(resp.data)
                  this.basicDetail = resp.data.data
                  this.querySendDetail()
              })
          },
      
      querySendDetail(){ //承运商信息
        this.$axios.get("/api/waybill/querySendDetail/" + this.waybillId)
              .then(resp => {
                  console.log(resp.data)
                  this.sendDetail = resp.data.data
              })
      },
      queryGoodsDetail(){ //货物信息
        this.$axios.get("/api/waybill/queryGoodsDetail/" + this.waybillId)
              .then(resp => {
                console.log(11111111111111111111111111111111111)
                  console.log(resp.data)
                  this.goodsData = resp.data.data
              })
      },
      returnWaybill(){
        //返回waybill页面
        this.$router.push({ path: '/waybill'})
      },

    },
    computed: {
      waybillStatusText() {
            const statusMap = {
                1: '待接单',
                2: '待提货',
                3: '待发车',
                4: '运输中',
                5: '待签收',
                6: '已完成',
                7: '已取消'
            };
            return statusMap[this.basicDetail.status] || '未知状态';
        },
        
        
        
    },

    created(){
      this.waybillId=this.$route.query.waybillId
      console.log(this.waybillId);

      this.queryBasicDetail()
      
      this.queryGoodsDetail()
    }
  }
  </script>
  
  <style scoped>
  .order-detail {
    padding: 20px;
    padding-bottom: 60px;
  }
  .box-card {
    margin-bottom: 20px;
  }
  .info-item {
    margin-bottom: 10px;
  }
  .info-item span:first-child {
    margin-right: 5px;
  }
  .status-green {
    color: green;
  }
  .fixed-bottom {
    position: fixed;
    width: 79%;
    margin-left: 240px; /*调整悬浮div左边距 */
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    padding: 10px 20px;
    text-align: right;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1000;
  }
  .fixed-bottom .el-button {
    margin-left: 10px;
  }
  </style>